/* enum */
import SubscriptionModuleEnum from '@model/enum/SubscriptionModuleEnum'
/* model */
import { BizTableTaskScopeSlot } from '@src/component/business/BizTable/BizTableTask'
/* methods */
import TaskPoolListMethods from '@src/modules/task/taskTypes/taskPool/TaskPoolListMethods'
/* service */
import { isInApprove } from '@service/TaskService'
/* vue */
import { VNode } from 'vue'
import i18n from '@src/locales'

class TaskPoolListRender extends TaskPoolListMethods {
  /**
   * @description: 渲染高级搜索按钮
   * @return {VNode}
   */  
   public renderAdvancedSearchButton(isNew = true): VNode {
    return isNew ? (
      <advanced-search
        ref="popperAdvancedSearchRef"
        fields={this.advanceSearchColumn}
        search-model={this.viewportSearchModel}
        has-save={!!(this.currentView && this.currentView.viewId && this.currentView.authEdit)}
        has-create={true}
        in-common-use={this.inCommonUse}
        onCreate={this.createViewBySearchModel.bind(this)}
        onSave={this.updateViewBySearchModel.bind(this)}
        onSearch={this.handleAdvancedSearch.bind(this)}
        onReset={this.resetSearchModel.bind(this)}
        onChangeCommonUse={this.changeCommonUse.bind(this)}
      >
      </advanced-search>
    ) : (
      <div
          class='advanced-search-btn pointer mar-l-10'
          onClick={() => this.toggleAdvancedSearchPanel()}
      >
        <i class='iconfont icon-filter task-mr4'></i>
        {i18n.t('common.base.advancedSearch')}
      </div>
    )
  }
  /**
   * @description: 渲染批量指派按钮
   * @return {VNode}
   */ 
    public renderBatchReAllotButton(): VNode {
      return (
        <permission auth={this.allowTaskBatchDispatch}>
          <el-button type='primary' onClick={() => this.batchReAllotTaskHandler()}>
            {i18n.t('task.taskTypes.allot.batchAllot')}
          </el-button>
        </permission>
      )
    }
    
    /**
     * @description: 渲染订阅按钮
     * @return {VNode}
     */  
    private renderSubscriptionButton(): VNode {
      return (
        <subscription-button 
          class="cur-point"
          module={SubscriptionModuleEnum.TaskPool}
          subscribed={this.initData?.hasSub}
          tooltipContent={i18n.t('task.tip.subscribeTaskTip')}
          onChange={(value: boolean) => this.initData.hasSub = value}
        >
        </subscription-button>
      )
    }
    
    private renderTaskPoolModeDropdown() {
      return (
        <el-dropdown>
          <div class='task-ai task-flex task-font14 task-c6 task-pointer cur-point'>
            <span class='task-mr4'>
              { this.mapShow ? i18n.t('common.base.mapMode') : i18n.t('common.base.listMode') }
            </span>
            <i class='iconfont icon-fdn-select'></i>
          </div>
          <div slot='dropdown'>
          <el-dropdown-menu>
            <el-dropdown-item>
              <div onClick={() => this.toggleMapShow(false)}>{i18n.t('common.base.listMode')}</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div onClick={() => this.toggleMapShow()}>{i18n.t('common.base.mapMode')}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
          </div>
        </el-dropdown>
      )
    }
    
    /**
     * @description: 渲染表格作用域插槽
     * @return {VNode | null} 插槽或空
     */  
    public renderTableScopedSlot(): Record<string, (data: BizTableTaskScopeSlot) => JSX.Element | null>| null {
      const _this = this
      
      return {
        // 接单操作
        acceptOperation: ({ value }: BizTableTaskScopeSlot) => {
          
          if (!this.allowTaskViewDetail) return null
          
          // 审批的中的工单不显示接单按钮
          if (isInApprove(value)) return null
          
          return (
            <el-button
              class='accept-task-button'
              type='text'
              size='small'
              onClick={() => _this.acceptTask(value)}
            >
              {i18n.t('common.task.button.acceptFromPool')}
            </el-button>
          )
        }
      }
    }
    
    
    /**
     * @description 渲染计划时间弹窗(接单)
     * @return {VNode}
     */  
    private renderPlantimeDialogComponent() {
      return (
        <plantime-dialog 
          ref="PlanTimeDialogComponent" 
          field={this.currentAcceptTaskPlanTimeField}
          modifiable={this.taskConfig?.taskPlanTime}
          task={this.currentAcceptTask}
          successCallback={() => this.planTimeConfirm()}
        />
      )
    }

    /**
     * @description 渲染计划开始完成时间弹窗(接单)
     * @return {VNode}
     */  
    private renderCalendarPlantimeDialogComponent() {
      return (
        <calendar-plantime-dialog 
          ref="CalendarPlanTimeDialogComponent"
          startField={this.currentAcceptTaskPlanStartTimeField}
          endField={this.currentAcceptTaskPlanEndTimeField}
          modifiable={this.taskConfig?.taskPlanTime}
          task={this.currentAcceptTask}
          isRefuse={false}
          successCallback={() => this.planTimeConfirm()}
        />
      )
    }
    
    /**
     * @description 渲染工单批量转派组件
     * @return {VNode}
     */  
    private renderTaskBatchReAllotComponent(): VNode {
      return <task-transfer ref='TaskTransferComponent' taskIdList={this.selectedIds} taskConfig={this.taskConfig} onRefresh={() => {this.refresh()}} />
    }
    
    /**
     * @description 渲染工单池派单地图
     * @return {VNode}
     */  
    private renderTaskPoolMapComponent(): VNode {
      return (
        <task-map
          ref="taskMap"
          auth={this.auth}
          mapShow={this.mapShow}
          onHide={() => this.toggleMapShow(false)}
          taskConfig={this.taskConfig}
          taskTypesMap={this.taskTypesMap}
          config={{
            selectedIds: this.selectedIds, 
            searchParams: {
              ...this.searchParams,
              ...this.advancedSearchModel,
              keyword: this.searchParams.keyword
            }
          }}
        />
      )
    }
    
    /**
     * @description: 渲染操作区域容器
     * @return {VNode}
     */ 
    public renderOperationContainer(): VNode {
      return (
        <div ref="tableDoContainer" class='common-list-view__v2 mt_12 operation-container pad-b-none'>
          <div class='common-list-view-header__v2 task-ai'>
            <div class='common-list-view-header__v2-left task-ai'>
              { this.renderBatchReAllotButton() }
              { this.renderDeleteButton() }
            </div>
            <div class='common-list-view-header__v2-right task-ai'>
              { !this.isBasicEditionHideSubscribe && this.renderSubscriptionButton() }
              { this.renderTaskPoolModeDropdown() }
              { this.renderSelectColumnsButton() }
            </div>
          </div>
        </div>
      )
    }
    
    /**
     * @description: 渲染其他组件容器
     * @return {VNode}
     */ 
    public renderComponentsContainer(): VNode {
      return (
        <div>
          {/* { this.renderAdvancedSearchPanel() } */
          this.renderAdvancedSearchPanelAllot()}
          { this.renderSelectColumnComponent() }
          { this.renderSelectionPanelComponent() }
          { this.renderTaskBatchReAllotComponent() }
          { this.renderPlantimeDialogComponent() }
          { this.renderCalendarPlantimeDialogComponent() }
          { this.renderTaskPoolMapComponent() }
        </div>
      )
    }
    
    /**
     * @description: 渲染工单池统计信息容器
     * @return {VNode}
     */ 
    public renderTaskPoolInfoContainer(): VNode {
      return (
        <div ref="tableHeaderTypeContainer" class='common-list-section__v2 search-box'>
          <div class='wait-accept-box' onClick={() => this.searchOverTimeTasks(false)}>
            <h3>{this.taskPoolCountInfo.taskPoolTotal}</h3>
            <p>{i18n.t('task.taskTypes.taskPool.toBeAcceptedTask')}</p>
            <i class='iconfont icon-list'></i>
          </div>
          <el-tooltip effect='dark' content={i18n.t('task.tip.taskPoolTip1')} placement='bottom'>
            <div class='overtime-task-box ml_12' onClick={() => this.searchOverTimeTasks()}>
              <h3>{this.taskPoolCountInfo.overTimeCount}</h3>
              <p>{i18n.t('task.list.displayName.overTimeTask')}</p>
              <i class='iconfont icon-list'></i>
            </div>
          </el-tooltip>
        </div>
      )
    }
    
    /**
     * @description: 渲染视图
     */ 
     public renderViewportDropdown() {
      return (
        <viewport-dropdown
          ref="viewportListRef"
          module="taskPool"
          currentView={this.currentView}
          onChoose={(event: any) => this.chooseView(event)}
          onEdit={(event: any) => this.editViewByViewport(event)}
          onCreate={(event: any) => this.editViewByViewport(event)}
          preViews={this.preViews}
        >
        </viewport-dropdown>
      )
    }

    /**
     * @description: 渲染视图编辑弹框
     */ 
     public renderAdvancedSearchModal() {
      return (
        <advanced-search-modal
          ref="advancedSearchModalRef"
          module="taskPool"
          fields={ this.advanceSearchColumns }
          beforeSave={ (viewport: any) => this.beforeSaveView(viewport) }
          onSave={(event: any) => this.handleViewportSave(event)}
        >
          <div class="task-common-advanced-search-form" slot="prefix">
            <div class="search-row flex-x">
              <div class="search-row__label">{i18n.t('task.components.list.quickCondition')}：</div>
              <div class="search-row__content">
                <el-tag class="__tag" type="info">{i18n.t('common.task.taskType')}：{ this.quickConditionTaskTypeName }  </el-tag>
              </div>
            </div>
          </div>
        </advanced-search-modal>
      )
    }
}

export default TaskPoolListRender
